<template>
  <!-- 主容器 -->
  <div class="main">
    <pc :width="w" :height="h">
      <div class="top">
        <!-- 顶部标题 -->
        <p class="top-title">
          京州建设集团管理驾驶舱
        </p>
      </div>

      <!-- 中间内容区域 -->
      <div class="middle">
        <!-- div.section*3 + Tab -->
        <div class="section left-section">
          <!-- 左上第一个 -->
          <div class="left-top">
            <div class="left-top-title">项目概况</div>
            <div class="left-top-main">
              <div class="main-first">
                <!-- item代表的是数组中的每一项   Index代表的是每一项的下标 -->
                <div v-for="(item, index) in firstMain" :key="index + 'a'">
                  <p>{{ item.company }}</p>
                  <p>{{ item.quantity }}</p>
                </div>
              </div>
              <div class="main-second">
                <div v-for="(item, index) in secondMain" :key="index + 'b'">
                  <p>{{ item.duties }}</p>
                  <p>{{ item.companys }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 左中 第二个 -->
          <div class="left-middle">
            <div class="left-middle-title">牛马管理</div>
            <div class="left-middle-main">
              <div class="main-first">
                <div>今日出勤人数</div>
                <div class="attendance-count">
                  <img :src="item" alt="" v-for="(item, index) in imgData" :key="index + 'img'">
                  <span>148/200</span>
                </div>
              </div>
              <div class="main-second">
                <div class="count-item">
                  <img src="@/assets/image/bg/a.png" alt="">
                  <div>
                    <p>建筑工人</p>
                    <p>168人</p>
                  </div>
                </div>
                <div class="count-item">
                  <img src="@/assets/image/bg/a-1.png" alt="">
                  <div>
                    <p>管理人员</p>
                    <p>22人</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 左下 第三个 -->
          <div class="left-bottom">
            <div class="left-bottom-title">安全管理</div>
            <div class="left-bottom-main">
              <div class="bottom-echarts" ref="bottomEcharts"></div>
            </div>
          </div>
        </div>
        <div class="section center-section">
          <webgl></webgl>
          <center-bottom></center-bottom>
        </div>
        <div class="section right-section">
          <!-- 天气 -->
          <div class="weather">
            <div class="wea-title">
              绿色施工
            </div>

            <div class="wea-main">
              <!-- 当日天气情况 -->
              <div class="the-day-wea">
                <img :src="dayWeatherIcon" alt="天气图标">
                <div class="temperature">27 °</div>
                <div class="temp-detail">
                  <p class="wea-desc">
                    中雨
                    <span>
                      <div></div>
                      优
                    </span>
                  </p>
                  <p class="min-max">16/22℃</p>
                </div>
              </div>
              <!-- 第二个盒子 -->
              <div class="the-day-detail">

                <div class="detail-item" v-for="(item, index) in weatherData" :key="index + 'detail'">
                  <div class="item-title">{{ item.text }}</div>
                  <img :src="item.path" alt="">
                  <div class="min-max">{{ item.data }} {{ item.unit }}</div>
                </div>

              </div>
              <!-- 第三个盒子 -->
              <div class="six-day-wea-line" ref="sixDayLine"></div>
              <!-- 第四个盒子 -->
              <div class="six-day-detail">
                <div class="detail-item" v-for="(item, index) in sevenData" :key="index + 'detail2'">
                  <img :src="item.path" alt="">
                  <p>{{ item.textDay }}</p>
                  <p>{{ item.fxDate }}</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 实时监控 视频流 -->
          <div class="live">
            <div class="live-title">
              视频监控
            </div>
            <!-- <div class="video"></div> -->
            <video id="videoPlayer" class="video-js vjs-default-skin" playsinline autoplay width="500px">
              <source :src="videoUrl" type="application/x-mpegURL" />
            </video>
          </div>
        </div>
      </div>
    </pc>
  </div>
</template>

<script lang="ts" setup>
import videojs from 'video.js'
import "video.js/dist/video-js.css";

import { nextTick, onMounted, ref } from 'vue';
import pc from './pc.vue';
import webgl from '@/components/webgl.vue';
import centerBottom from '@/components/centerBottom.vue';
import * as echarts from 'echarts';

const r1 = new URL('@/assets/image/bg/r1.png', import.meta.url).href
const r2 = new URL('@/assets/image/bg/r2.png', import.meta.url).href
const imgData = ref([r1, r1, r1, r1, r1, r1, r1, r2, r2, r2])

let w = ref(1920)
let h = ref(1080)

// 定义一个数组去存储变量
const firstMain = ref([
  {
    company: '工程造价(万)',
    quantity: 3483.79
  },
  {
    company: '合同工期(天)',
    quantity: 365
  },
  {
    company: '建筑规模(m³)',
    quantity: 9972.14
  }
])

const secondMain = ref([
  {
    duties: '建设单位',
    companys: '中国中铁有限责任公司'
  },
  {
    duties: '设计单位',
    companys: '上海天华有限责任公司'
  },
  {
    duties: '监理单位',
    companys: '中咨监理有限责任公司'
  },
  {
    duties: '施工单位',
    companys: '中建三局集团有限公司'
  }
])


const bottomEcharts = ref(null)
const getLeftBottomEcharts = () => {
  type EchartsOption = echarts.EChartsOption;
  const option: EchartsOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} {d}%'
    },
    graphic: [{
      type: 'text',
      left: 'center',
      top: '45%',
      style: {
        text: '23/17%',
        fill: '#0af',
        fontSize: 24,
        fontWeight: 'bold',
        shadowBlur: 10,
        shadowColor: '#0fa',
        align: 'center'
      }
    }, {
      type: 'text',
      left: 'center',
      top: '55%', // 稍微偏下
      style: {
        text: '未消除隐患',
        fill: '#999',
        fontSize: 14,
        fontWeight: 'normal',
        align: 'center'
      }
    }],
    series: [
      {
        type: 'pie',
        radius: ['40%', '55%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}: {d}%',
          fontSize: 12,
          position: 'outer',
          alignTo: 'edge',
          edgeDistance: 20,
          distanceToLabelLine: 1,
          lineHeight: 15,
          color: '#999'
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 10,
          lineStyle: {
            color: '#999', // 引导线颜色也设为灰色
            width: 1,
            type: 'solid'
          }
        },
        data: [
          {
            value: 40,
            name: '安全管理',
            itemStyle: { color: '#FFD700' },
            selected: true,
            label: {
              color: '#FFD700'
            },
            labelLine: {
              lineStyle: {
                color: '#FFD700'
              },
              length: 10,
              length2: 40,
            }
          },
          {
            value: 40, name: '文明施工', itemStyle: { color: '#1E90FF' },
            labelLine: {
              length: 10,
              length2: 10,
            }
          },
          {
            value: 40, name: '脚手架', itemStyle: { color: '#1E90FF' },
            labelLine: {
              length: 10,
              length2: 20,
            }
          },
          {
            value: 40, name: '基坑支护安全', itemStyle: { color: '#1E90FF' },
            labelLine: {
              length: 10,
              length2: 20,
            }
          },
          {
            value: 40, name: '模板工程安全', itemStyle: { color: '#1E90FF' },
            labelLine: {
              length: 10,
              length2: 20,
            }
          },
          {
            value: 40, name: '施工用电', itemStyle: { color: '#1E90FF' },
            labelLine: {
              length: 8,
              length2: 8,
            }
          },
          {
            value: 40, name: '物料提升机', itemStyle: { color: '#1E90FF' },
            labelLine: {
              length: 5,
              length2: 5,
            }
          },
          {
            value: 40, name: '外用电池', itemStyle: { color: '#1E90FF' },
            labelLine: {
              length: 10,
              length2: 40,
            }
          }
        ]
      }
    ]
  }
  // 初始化echarts容器
  const myEcharts = echarts.init(bottomEcharts.value)
  // 给echarts容器添加配置项
  myEcharts.setOption(option)
}

onMounted(() => {
  getLeftBottomEcharts()
  nextTick(() => {
    loadVideo()
  })
})

// 视频相关
const videoUrl = 'https://rvsh.jtw.sh.gov.cn/live/310151a4-3d7c-4a7d-82dc-71fd1173e131_sub/index.m3u8?t=1884800848&k=b58b46c75ba72b4e'
const videoObj = ref({})
const options = ref({
  autoplay: false, // 自动播放
  muted: true, // 静音
  preload: "auto", // 预加载
  controls: true // 显示直播的控件
})
const loadVideo = () => {
  videoObj.value = videojs('videoPlayer', options.value)
}

const dayWeatherIcon = ref('')
dayWeatherIcon.value = new URL('@/assets/image/weather/100.png', import.meta.url).href
const weatherData = ref([
  {
    text: "温度",
    path: new URL('@/assets/image/icons/温度.png', import.meta.url).href,
    data: "9-16",
    unit: '℃'
  },
  {
    text: "风向",
    path: new URL('@/assets/image/icons/风向.png', import.meta.url).href,
    data: "9-16",
    unit: ''
  },
  {
    text: "温度",
    path: new URL('@/assets/image/icons/温度.png', import.meta.url).href,
    data: "9-16",
    unit: '%'
  },
  {
    text: "风速",
    path: new URL('@/assets/image/icons/风速.png', import.meta.url).href,
    data: "9-16",
    unit: 'm/s'
  }
])

// https://n76het5egt.re.qweatherapi.com/geo/v2/city/lookup?location=青岛&key=938f21a3134d4551a1f3c1f405cdc39b
const apiKey = '938f21a3134d4551a1f3c1f405cdc39b'
const apiHost = 'n76het5egt.re.qweatherapi.com'
const locationId = ref(null)
const locationLon = ref(null)
const locationLat = ref(null)
// 当日天气
const dayWeather = ref()

const sixDayLine = ref(null)
interface WeatherData {
  tempMin: number;
  tempMax: number;
  fxDate: string
}

const getWeatherEcharts = (data: WeatherData[]) => {
  const minTemp = data.map(item => item.tempMin)
  const maxTemp = data.map(item => item.tempMax)
  const date = data.map(item => item.fxDate)
  let myChart: echarts.ECharts | null = null;
  if (!myChart) {
    myChart = echarts.init(sixDayLine.value);
  }
  type EChartsOption = echarts.EChartsOption;

  const option: EChartsOption = {
    grid: { top: '40%', right: '3%', bottom: '0%', left: '0%', containLabel: true },
    xAxis: {
      show: false, type: 'category',
      data: date
    },
    yAxis: { show: false, type: 'value' },
    series: [
      {
        name: '最高气温',
        data: maxTemp,
        type: 'line',
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: { width: 3, type: 'solid', color: '#EE6666' },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}',
          color: '#EE6666',
          padding: [0, 0, 10, 0] // 下间距
        },
        z: 2 // 确保在上层
      },
      {
        name: '最低气温',
        data: minTemp.map(v => (v * 0.95).toFixed(1)), // 缩小5%制造间距
        type: 'line',
        symbol: 'emptyCircle',
        symbolSize: 6,
        lineStyle: { width: 3, type: 'dashed', color: '#5470C6' },
        label: {
          show: true,
          position: 'bottom',
          formatter: '{c}',
          color: '#5470C6',
          padding: [10, 0, 0, 0] // 上间距
        },
        z: 1
      }
    ],
    tooltip: { trigger: 'axis' } // 增加悬浮提示
  };

  myChart.setOption(option);
}

interface DailyData {
  textDay: string;
  fxDate: string;
  path: string;
  iconDay: string;
}
const sevenData = ref<DailyData[]>([])
// 七天的天气数据
import axios from 'axios';
const getSevenWeather = () => {
  const url = `https://${apiHost}/v7/weather/7d?location=101120201&key=${apiKey}`
  axios.get(url).then(response => {
    if (response.data.code === '200') {
      response.data.daily.forEach((item: DailyData) => {
        sevenData.value.push({
          textDay: item.textDay,
          fxDate: `${item.fxDate.split('-')[1]}-${item.fxDate.split('-')[2]}`,
          path: new URL(`../assets/image/weather/${item.iconDay}.png`, import.meta.url).href,
          iconDay: item.iconDay
        });
      });
      getWeatherEcharts(response.data.daily)
    }
  })
}
getSevenWeather()

</script>



<style scoped lang="scss">
// 通配符选择器 *{}，意思是选择页面上的所有元素 
* {
  margin: 0;
  padding: 0;
}

// 自定义字体
@font-face {
  font-family: MySummerFont;
  // 字体文件路径
  src: url('@/assets/font/TaoBaoMaiCaiTi-Regular/TaoBaoMaiCaiTi-Regular.ttf') format('truetype');
  font-weight: bold;
}

.main {
  width: 100%;
  height: 100vh;
  position: relative;
  background: url("@/assets/image/bg/zbj.png") no-repeat center center;
  // 让背景图的大小正好是容器的100%大小
  background-size: 100% 100%;

  .top {
    width: 100%;
    height: 100px;
    background-color: red;
    // 最小高度
    min-height: 80px;
    background: url("@/assets/image/bg/header.png") no-repeat center center;
    background-size: 100% 100%;
    // 让文本在容器 内水平居中 ⬇️
    text-align: center;
    display: flex;
    justify-content: center;
    color: #fff;
    line-height: 40px;
    position: relative;
    // z-index:使用 了position之后才有效。用来调整元素在页面上的显示层级
    z-index: 10;
    padding: 10px 0;

    .top-title {
      font-family: MySummerFont;
      font-size: 38px;
      font-weight: bold;
      padding: 0 22px;
    }
  }

  .middle {
    width: 100%;
    // 固定定位，将middle这个盒子固定在某个位置
    position: fixed;
    top: 30px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    // 计算盒模型的时候用总体宽度高度
    box-sizing: border-box;
    // background-color: red;

    display: grid;
    grid-template-columns: 2fr 5fr 2fr;
    gap: 20px;

    .section {
      border-radius: 8px;
      overflow: hidden;
    }

    .left-section {
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      gap: 10px;

      .left-top {
        // 设置左侧三个区域的背景
        background: url('@/assets/image/bg/kp.png') no-repeat;
        background-position: left top;

        background-size: 100% 100%;

        .left-top-title {
          color: #fff;
          font-size: 18px;
          // bold加粗
          font-weight: bold;
          font-family: MySummerFont;
          font-style: italic;
          background: linear-gradient(to bottom, #fff, #0fa, #fff);
          background-clip: text;
          -webkit-background-clip: text;
          // 让文字透明化(而背景又是渐变的,所以眼睛看上去字的颜色是渐变的)
          -webkit-text-fill-color: transparent;
          padding: 22px 80px;
        }

        .left-top-main {
          display: grid;
          grid-template-rows: 1fr 2fr;
          row-gap: 20px;
          padding: 30px 20px;

          .main-first {
            color: #fff;
            // 弹性布局
            display: flex;
            justify-content: space-between;

            p:nth-child(1) {
              color: #999;
              font-size: 14px;
            }

            p:nth-child(2) {
              color: #fff;
              font-weight: bold;
              font-size: 26px;
              // 字体阴影
              text-shadow: 0 0 5px #0af, 0 0 10px #0af, 0 0 20px #0af;
              margin-top: 10px;
            }
          }

          .main-second {
            display: grid;
            // 两列
            grid-template-columns: repeat(2, 1fr);
            // 两行
            grid-template-rows: repeat(2, 1fr);

            gap: 20px;

            p:nth-child(1) {
              color: #999;
              font-size: 14px;
            }

            p:nth-child(2) {
              color: #fff;
              font-size: 16px;
              margin-top: 10px;
            }
          }
        }
      }

      .left-middle {
        // 设置左侧三个区域的背景
        background: url('@/assets/image/bg/kp.png') no-repeat;
        background-position: left top;
        background-size: 100% 100%;

        .left-middle-title {
          color: #fff;
          font-size: 18px;
          // bold加粗
          font-weight: bold;
          font-family: MySummerFont;
          font-style: italic;
          background: linear-gradient(to bottom, #fff, #0fa, #fff);
          background-clip: text;
          -webkit-background-clip: text;
          // 让文字透明化(而背景又是渐变的,所以眼睛看上去字的颜色是渐变的)
          -webkit-text-fill-color: transparent;
          padding: 22px 80px;
        }

        .left-middle-main {
          display: grid;
          grid-template-rows: 1fr 2fr;
          // row-gap: 20px;
          padding: 30px 20px 0px;
          color: #999;

          .main-first {

            // background-color: red;
            .attendance-count {
              background: url('@/assets/image/bg/btbj.png') no-repeat;
              background-size: 100% 100%;
              padding: 10px;
              margin-top: 10px;
              display: flex;
              // 将剩余空间分配给每一个弹性元素周期
              justify-content: space-around;

              // 出勤人数的样式
              span {
                color: #fff;
                font-weight: 700;
                font-size: 26px;

                text-shadow: 0 0 5px #0af, 0 0 10px #0af, 0 0 20px #0af;
              }
            }
          }

          .main-second {
            // background-color: #0fa;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: 20px;

            .count-item {
              // background-color: red;
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                width: 100px;
                height: 90px;
              }

              div {
                line-height: 40px;
              }
            }
          }
        }

      }

      .left-bottom {
        background: url('@/assets/image/bg/kp.png') no-repeat;
        background-position: left top;
        background-size: 100% 100%;

        .left-bottom-title {
          color: #fff;
          font-size: 18px;
          // bold加粗
          font-weight: bold;
          font-family: MySummerFont;
          font-style: italic;
          background: linear-gradient(to bottom, #fff, #0fa, #fff);
          background-clip: text;
          -webkit-background-clip: text;
          // 让文字透明化(而背景又是渐变的,所以眼睛看上去字的颜色是渐变的)
          -webkit-text-fill-color: transparent;
          padding: 22px 80px;
        }

        .left-bottom-main {
          width: 100%;
          height: 90%;
          // background-color: red;
          padding: 20px;
          box-sizing: border-box;

          .bottom-echarts {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .center-section {
      // background-color: green;
      // background: url('@/assets/image/bg/t.png') no-repeat center center;
      background-size: 700px;
      position: relative;
    }

    .right-section {
      // background-color: #0fa;
      display: grid;
      grid-template-rows: 3fr 2fr;

      gap: 20px;

      .weather {
        // background-color: aqua;
        background: url('@/assets/image/bg/lft.png');
        background-position: left top;
        background-size: 100% 100%;


        .wea-title {
          color: #fff;
          font-size: 20px;
          // 字体加粗 ⬇️
          font-weight: bold;
          font-family: MySummerFont;
          font-style: italic;
          background: linear-gradient(to right, #fff, #0fa, #fff);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          padding: 22px 80px;
        }

        .wea-main {
          display: grid;
          grid-template-rows: 2fr 3fr 3fr 3fr;
          // 给 wea-main这个盒子上下是0px的内边距，左右20px内边距
          padding: 0 20px;
          height: 600px;

          .the-day-wea {
            // 第一行
            // background-color: #0af;
            display: flex;
            color: #fff;
            align-items: center;

            img {
              width: 80;
              height: 80px;
            }

            .temperature {
              font-weight: 700;
              font-size: 38px;
              text-shadow: 0 0 5px #0af, 0 0 10px #0af, 0 0 20px #0af;
              margin-left: 10px;
            }

            .temp-detail {
              margin-left: 10px;
              color: #ccc;
              line-height: 30px;

              .wea-desc {
                // background-color: red;
                display: flex;

                span {
                  width: 60px;
                  background-color: rgba(255, 255, 255, 0.2);
                  // 文字居中
                  text-align: center;
                  border-radius: 10px;
                  margin-left: 20px;

                  display: flex;
                  justify-content: center;
                  align-items: center;

                  // position: relative;
                  div {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background-color: #fff;
                    box-shadow: 0 0 5px #0af, 0 0 10px #0af, 0 0 20px #0af;
                    margin-right: 10px;
                    // position: absolute;
                    top: 12px;
                    left: 8px;
                  }
                }
              }
            }
          }

          .the-day-detail {
            // 第二个盒子
            // background-color: #0fa;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            justify-content: center;
            align-items: center;
            column-gap: 5px;
            color: #fff;

            .detail-item {
              height: 120px;
              border: 1px solid #024179;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;

              .item-title {
                width: 100%;
                height: 30px;
                // 文字水平居中
                text-align: center;
                // 行高和容器高度一致，会让文字在盒子中垂直居中
                line-height: 30px;
                background-color: #012445;
                border-bottom: 1px solid #024179;
              }

              img {
                height: 60px;
                padding: 10px 0;
              }
            }
          }

          .six-day-wea-line {
            // 第三个盒子
            // background-color: antiquewhite;
          }

          .six-day-detail {
            // 第四个盒子
            // background-color: red;
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            column-gap: 10px;
            // margin-top: 15px;
            color: #fff;
            .detail-item {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              img {
                width: 30px;
              }
              p {
                margin-top: 5px;
              }
            }
          }
        }
      }

      .live {
        // background-color: #0fa;
        background: url('@/assets/image/bg/lft.png');
        background-position: left top;
        background-size: 100% 100%;

        .live-title {
          color: #fff;
          font-size: 20px;
          // 字体加粗 ⬇️
          font-weight: bold;
          font-family: MySummerFont;
          font-style: italic;
          background: linear-gradient(to right, #fff, #0fa, #fff);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          padding: 13px 80px;
        }

        #videoPlayer {
          width: 100%;
          height: 280px;
          margin-left: 14px;
          margin-top: 30px;
        }
      }
    }
  }

}
</style>
